<template>
<!--   项目用地 -->
    <div>
        <a-card :bordered="false">
            <a-tabs
                v-model="activeKey"
                type="card">
                <a-tab-pane v-for="pane in panes" :tab="pane.title" :key="pane.key" >
                    <div v-if="pane.key==='1'">
                        <div v-if="landCertState!=='1'">
                            <a-alert message="项目尚未添加地块所属地证信息，请选择土地证信息，并点击保存" type="info" showIcon />
                            <a-row :gutter="22" class="select-bar">
                                <a-col :span="18">
                                    <a-select
                                    mode="tags"
                                    style="width: 100%"
                                    @change="handleSelectChange"
                                    placeholder="请输入或选择地块证ID">
                                    <a-select-option v-for="(item,index) in landResourceListData" :value="item.id.toString()" :key="index">
                                        {{item.landId}}
                                    </a-select-option>
                                </a-select>
                                </a-col>
                                <a-col :span="6">
                                    <a-button type="primary"
                                              @click="saveLandResource"
                                              :disabled="!Boolean(landId)">
                                        保存选择</a-button>
                                </a-col>
                            </a-row>
                        </div>
                        <div v-show="landId">
                            <land-cert :landResourceData="landResourceData"></land-cert>
                        </div>
                    </div>
                    <div v-if="pane.key==='2'">
                        <div v-if="hasProjectPlan">
                            <project-land-detail :data="projectLandDetailData"></project-land-detail>
                        </div>
                        <div v-else>
                            <add-project-land
                                :projectNum="p.project_number"
                                @saveSuccess="projectLandSaveSuccess"
                                :landId="landId.toString()"></add-project-land>
                        </div>
                    </div>
                    <div v-if="pane.key==='3'">
                        <div v-if="hasPeripheralBusiness">
                            <peripheral-business-detail :data="peripheralBusinesslData"></peripheral-business-detail>
                        </div>
                        <div v-else>
                            <add-project-peripheral-business
                                :projectNum="p.project_number"
                                :projectName="p.name"
                                @saveSuccess="peripheralBusinessSaveSuccess"></add-project-peripheral-business>
                            
                        </div>
                    </div>
                </a-tab-pane>
            </a-tabs>
            
            
            
        </a-card>
        <!--         fixed footer toolbar -->
    
    </div>
</template>

<script>

    import indexedDB from '@/db/db'
    import DetailList from '@/components/tools/DetailList'
    
    const DetailListItem = DetailList.Item
    
    import LandCert from './LandCert'
    import AddProjectLand from './AddProjectLand'
    import ProjectLandDetail from './ProjectLandDetail'
    import AddProjectPeripheralBusiness from './AddPeripheralBusiness'
    import PeripheralBusinessDetail from './PeripheralBusinessDetail'
    export default {
        name: "ProjectApproval",
        components: {
            ProjectLandDetail,
            LandCert,
            AddProjectLand,
            AddProjectPeripheralBusiness,
            PeripheralBusinessDetail
        },
        data() {
            const panes = [
                { title: '土地信息', key: '1'},
                { title: '项目用地表', key: '2'},
                { title: '业态信息表', key: '3'},
            ]
            return {
                p:[],
                activeKey: panes[0].key,
                panes,
                newTabIndex: 0,
                landCertState:'',
                landResourceData:{},
                landResourceListData:[],
                landId:'',
                hasProjectPlan: false,
                projectLandDetailData:{},
                hasPeripheralBusiness: false,
                peripheralBusinesslData:{},
            }
        },
        mounted() {
            let id = this.$route.query.objId
            this.getProjectDetail(parseInt(id))
            this.getLandResourceList()
        },
        methods: {
            callback (key) {
                console.log(key)
            },
            handleSelectChange(value) {
                if(value.length>0){
                    this.getLandResource(parseInt(value))
                } else {
                    this.landId = ''
                }
            },
            getProjectDetail(id){
                indexedDB.get({name:'project'},id).then(res=>{
                    this.p = res[0]
                    if(res[0].land_resource_id){
                        this.landCertState = '1'
                        this.getLandResource(parseInt(res[0].land_resource_id))
                        this.getProjectLand()
                        this.getPeripheralBusiness()
                    }
                    
                })
            },
            getLandResource(id){
                indexedDB.get({name:'landResource'},id).then(res=>{
                    this.landResourceData = res[0]
                    if(this.landResourceData.files > 0){
                        this.landResourceData.files.forEach(item=>{
                            item.url = URL.createObjectURL(item.originFileObj)
                        })
                    }
                    
                    this.landId = res[0].id
                })
            },
            getLandResourceList(){
                indexedDB.handleDataByCursor('landResource','').then(res=>{
                    this.landResourceListData = res
                    
                    // console.log(res)
                })
                
            },
            saveLandResource(){
                this.p.land_resource_id = this.landId
                indexedDB.update({name:'project'},this.p).then(res=>{
                    this.landCertState = '1'
                    this.$message.success('土地信息绑定成功')
                })
            },
            projectLandSaveSuccess(){
                this.getProjectLand()
                this.$success({
                    title: `保存成功`,
                    content: `点击确定返回`,
                })
            },
            peripheralBusinessSaveSuccess(){
                this.getPeripheralBusiness()
                this.$success({
                    title: `保存成功`,
                    content: `点击确定返回`,
                })
            },
            getProjectLand(){
                let kRound = IDBKeyRange.only(this.p.project_number)
                indexedDB.handleDataByIndex('projectLand',kRound,'project_number').then(res=>{
                    this.projectLandDetailData = res[0]
                    
                    this.hasProjectPlan = true
                })
            },
            getPeripheralBusiness(){
                console.log(this.p.project_number)
                let kRound = IDBKeyRange.only(this.p.project_number)
                indexedDB.handleDataByIndex('peripheralBusiness',kRound,'project_number').then(res=>{
                    console.log(res)
                    this.peripheralBusinesslData = res[0]
                    this.peripheralBusinesslData.files.forEach((item,index)=>{
                        this.peripheralBusinesslData.files[index].url = URL.createObjectURL(item.originFileObj)
                    })
                    this.hasPeripheralBusiness = true
                })
            }
        },
    }
</script>

<style lang="scss" scoped>
    .card {
        margin-bottom: 24px;
    }
    .title {
        font-size: 20px;
        line-height: 28px;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.85);
        margin: 16px 0 30px 0;
    }
    .select-bar {
        padding: 20px 0;
    }
</style>